<template>
  <div :class="['device-item',{well:check} ]" @contextmenu.prevent="onContextmenu">
    <div class="item content-center flex">
      <el-badge :value="device.warnNum" :hidden="device.warnNum === 0">
        <el-image
          style="width: 35px; height: 35px;margin-top: 8px;margin-right: 8px"
          :src="device.iconUrl"
          fit="fit"
          @click="iconClick"
        >
          <div slot="error" class="image-slot">
            <i
              class="el-icon-picture-outline"
              style="font-size: 35px;line-height: 35px"
              @click="iconClick"
            />
          </div>
        </el-image>
      </el-badge>
      <div class="fex text-xs" style="flex-grow:1">
        <div v-if="isEdit==true">
          <el-input v-model="device.deviceName">
            <el-button slot="append" icon="el-icon-close" @click="isEdit=false"/>
            <el-button slot="append" icon="el-icon-check" @click="updateDeviceName()"/>
          </el-input>
        </div>
        <div
          v-else
          class="primary-color text-sm"
        >
          {{ device.deviceName }}
        </div>
        <div
          class="text-gray-600"
        >
          {{ $t('deviceCore') }}:{{ device.deviceCore }}
        </div>
        <div class="text-gray-400">
          {{ device.address }}
        </div>
      </div>
      <div style="display: flex;display: -webkit-flex;">
        <div
          style="display: flex;display: -webkit-flex;justify-content:space-between;flex-direction:column;align-content: center"
        >
          <app-signal
            :signal="device.netSignal"
            :status="device.status"
            :connect-type="device.connectType"
          />
          <el-button
            icon="el-icon-menu"
            size="mini"
            @click="gotoManage"
          />
        </div>
        <div
          style="display: flex;display: -webkit-flex;justify-content:space-between;flex-direction:column;margin-left: 5px;align-content: center"
        >
          <app-surplus slot="reference" :device="device"/>
          <el-button
            :disabled="device.canSetting === false"
            icon="el-icon-setting"
            size="mini"
            @click.stop="showSetting=true"
          />
        </div>
      </div>
    </div>

    <el-dialog
      :visible.sync="dialogWxCoreVisible"
      width="400px"
    >
      <device-qrcode
        v-if="dialogWxCoreVisible"
        style="width: 100%;height: 100%"
        :device-core="device.deviceCore"
      />
    </el-dialog>

    <el-dialog
      :visible.sync="dialogBelongVisible"
      width="950px"
      top="15px"
    >
      <belong-manage v-if="dialogBelongVisible" :device-core="device.deviceCore"/>
    </el-dialog>

    <el-dialog
      :visible.sync="showSetting"
      :title="device.deviceName"
      width="1200px"
      top="15px"
    >
      <device-setting
        v-if="showSetting"
        :device-core="device.deviceCore"
        class="uni-scroll"
        style="height: 600px"
      />
    </el-dialog>

    <el-dialog
      :visible.sync="dialogIconFormVisible"
    >
      <div>
        <el-image
          v-for="(item,index) in iconList"
          :key="index"
          style="cursor: pointer;width: 40px;height: 40px;margin: 5px"
          :src="item.url"
          @click="changeIco(item.url,200145308)"
        />
      </div>
    </el-dialog>

    <el-dialog
      :title="$t('tag')"
      :visible.sync="dialogTagVisible"
    >
      <tag-device v-if="dialogTagVisible" :device="device"/>
    </el-dialog>

  </div>
</template>

<script>
import DeviceQrcode from '@/components/DeviceQrcode'
import BelongManage from '@/components/BelongManage'
import DeviceSetting from '@/components/DeviceSetting'
import AppSignal from '@/components/AppSignal'
import AppSurplus from '@/components/AppSurplus'
import TagDevice from '@/components/TagDevice'
import { getDeviceStatus, listDeviceIcon, updateDevice } from '@/api/iot/iotDeviceApi'
import { successNotice } from '@/util/common'
import { getDevModel, getEnableServerLinkage, getNetModel, getUserId } from '@/util/storage'
import { getBelong } from '@/api/iot/iotDeviceBelongApi'

export default {
  name: 'DeviceItem',
  components: {
    DeviceQrcode,
    BelongManage,
    DeviceSetting,
    AppSignal,
    AppSurplus,
    TagDevice
  },
  props: {
    device: {
      type: Object,
      default: null
    },
    check: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isEdit: false,
      dialogIconFormVisible: false,
      showTool: false,
      showSetting: false,
      dialogWxCoreVisible: false,
      dialogBelongVisible: false,
      dialogTagVisible: false,
      iconList: [],
      netModel: getNetModel(),
      enableServerLinkage: getEnableServerLinkage() === 'true',
      devModel: getDevModel() === 'true',
      userId: getUserId(),
      deviceBelong: null
    }
  },
  watch: {
    device: {
      deep: true,
      handler() {
        this.init()
      }
    }
  },
  methods: {
    init() {
      this.showTool = false
      this.showSetting = false
      getBelong({
        deviceCore: this.device.deviceCore,
        userId: this.userId
      }).then(res => {
        const { data, code } = res
        if (code === '200') {
          this.deviceBelong = data
        }
      })
    },
    changeIco(iconUrl) {
      updateDevice({
        deviceId: this.device.deviceId,
        iconUrl: iconUrl
      }).then(() => {
        this.dialogIconFormVisible = false
        this.$emit('refresh-list')
      })
    },
    iconClick() {
      this.listDeviceIcon()
    },
    listDeviceIcon() {
      listDeviceIcon({}).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.iconList = data
          this.dialogIconFormVisible = true
        }
      })
    },
    onContextmenu(event) {
      this.$contextmenu({
        items: [
          {
            label: this.$t('edit'),
            onClick: () => {
              this.isEdit = true
            }
          },
          {
            label: this.$t('copy'),
            icon: 'el-icon-document-copy',
            onClick: () => {
              this.$copyText(this.device.deviceCore)
            }
          },
          {
            label: this.$t('refresh') + '(R)',
            icon: 'el-icon-refresh',
            onClick: () => {
              this.$emit('refresh-list')
            }
          },
          {
            label: this.$t('tag'),
            icon: 'el-icon-price-tag',
            onClick: () => {
              this.dialogTagVisible = true
            }
          },
          {
            label: this.$t('device') + this.$t('data'),
            children: [
              {
                label: this.$t('device') + this.$t('survey'),
                onClick: () => {
                  this.$router.push({
                    path: '/device/info/' + this.device.deviceCore,
                    query: { deviceCore: this.device.deviceCore, deviceName: this.device.deviceName }
                  })
                }
              },
              {
                label: this.$t('realTime') + this.$t('curve'),
                onClick: () => {
                  this.$router.push({
                    path: '/device/sensor-real-time/' + this.device.deviceCore,
                    query: { deviceCore: this.device.deviceCore, deviceName: this.device.deviceName }
                  })
                }
              },
              {
                label: this.$t('history') + this.$t('curve'),
                onClick: () => {
                  this.$router.push({
                    path: '/device/sensor-history/' + this.device.deviceCore,
                    query: { deviceCore: this.device.deviceCore, deviceName: this.device.deviceName }
                  })
                }
              },
              {
                label: this.$t('setting') + this.$t('history'),
                onClick: () => {
                  this.$router.push({
                    path: '/device/setting/history/' + this.device.deviceCore,
                    query: { deviceCore: this.device.deviceCore, deviceName: this.device.deviceName }
                  })
                }
              },
              {
                label: this.$t('device') + this.$t('warn'),
                icon: this.device.warnNum > 0 ? 'el-icon-warning' : 'el-icon-warning-outline',
                onClick: () => {
                  this.$router.push({
                    path: '/device/warn/' + this.device.deviceCore,
                    query: { deviceCore: this.device.deviceCore, deviceName: this.device.deviceName }
                  })
                }
              },
              {
                label: this.$t('device') + this.$t('status'),
                onClick: () => {
                  this.$router.push({
                    path: '/device/status/' + this.device.deviceCore,
                    query: { deviceCore: this.device.deviceCore, deviceName: this.device.deviceName }
                  })
                }
              },
              {
                label: this.$t('device') + this.$t('local'),
                disabled: this.netModel === 'local',
                onClick: () => {
                  this.$router.push({
                    path: '/device/local/' + this.device.deviceCore,
                    query: { deviceCore: this.device.deviceCore, deviceName: this.device.deviceName }
                  })
                }
              }
            ]
          },

          {
            label: this.$t('permission'),
            disabled: !this.devModel && !this.deviceBelong.canManage,
            onClick: () => {
              this.dialogBelongVisible = true
            }
          },
          // {
          //   label: this.$t('view') + ('(实验功能)'),
          //   onClick: () => {
          //     this.$router.push({
          //       path: '/topo/editor/' + this.device.deviceCore,
          //       query: { deviceCore: this.device.deviceCore, deviceName: this.device.deviceName }
          //     })
          //   }
          // },
          {
            label: this.$t('linkage'),
            icon: 'el-icon-s-operation',
            divided: true,
            disabled: !this.enableServerLinkage || !this.device.canDeviceLinkage,
            onClick: () => {
              this.$router.push({
                path: '/device/linkage/' + this.device.deviceCore,
                query: { deviceCore: this.device.deviceCore, deviceName: this.device.deviceName }
              })
            }
          },
          {
            label: this.$t('sensor') + this.$t('manage'),
            disabled: !this.devModel,
            children: [
              {
                label: this.$t('sensor'),
                disabled: !this.devModel,
                onClick: () => {
                  this.$router.push({
                    path: '/device/sensor/' + this.device.deviceCore,
                    query: { deviceCore: this.device.deviceCore, deviceName: this.device.deviceName }
                  })
                }
              },
              {
                label: this.$t('param'),
                icon: 'el-icon-c-scale-to-original',
                disabled: !this.devModel,
                onClick: () => {
                  this.$router.push({
                    path: '/device/param/' + this.device.deviceCore,
                    query: {
                      'deviceCore': this.device.deviceCore,
                      'deviceName': this.device.deviceName
                    }
                  })
                }
              },
              {
                icon: 'el-icon-document',
                label: this.$t('explain'),
                disabled: !this.devModel,
                onClick: () => {
                  this.$router.push({
                    path: '/device/explain/' + this.device.deviceCore,
                    query: {
                      'deviceCore': this.device.deviceCore,
                      'deviceName': this.device.deviceName
                    }
                  })
                }
              },
              {
                icon: 'el-icon-s-tools',
                label: this.$t('setting'),
                disabled: !this.devModel,
                onClick: () => {
                  this.$router.push({
                    path: '/device/setting/' + this.device.deviceCore,
                    query: {
                      'deviceCore': this.device.deviceCore,
                      'deviceName': this.device.deviceName
                    }
                  })
                }
              }]
          },
          {
            label: this.$t('developers'),
            icon: 'el-icon-odometer',
            disabled: !this.devModel,
            children: [
              {
                label: this.$t('refresh') + this.$t('status'),
                onClick: () => {
                  getDeviceStatus({
                    deviceCore: this.device.deviceCore
                  }).then(res => {
                    const { code } = res
                    if (code === '200') {
                      this.$emit('refresh-list')
                    }
                  })
                }
              },
              {
                label: this.$t('iot') + this.$t('realTime'),
                onClick: () => {
                  this.$router.push({
                    path: '/iot/now',
                    query: { deviceCore: this.device.deviceCore, deviceName: this.device.deviceName }
                  })
                }
              },
              {
                label: this.$t('iot') + this.$t('history'),
                onClick: () => {
                  this.$router.push({
                    path: '/iot/history',
                    query: { deviceCore: this.device.deviceCore, deviceName: this.device.deviceName }
                  })
                }
              }
            ]
          },
          {
            label: this.$t('qrCode'),
            onClick: () => {
              this.dialogWxCoreVisible = true
            }
          }
        ],
        event,
        customClass: 'class-a',
        zIndex: 3,
        minWidth: 230
      })
      return false
    },
    updateDeviceName() {
      updateDevice({
        deviceCore: this.device.deviceCore,
        deviceName: this.device.deviceName
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
        }
        this.isEdit = false
      })
    },
    gotoManage() {
      this.$router.push({
        path: '/device/manage/' + this.device.deviceCore,
        query: { deviceCore: this.device.deviceCore, deviceName: this.device.deviceName }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/element-variables.scss';

.primary-color {
  color: $--color-primary;
}

.fex {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-item {
  -webkit-border-radius: 8px;
  padding: 5px;
  margin: 2px 5px;
}

.device-item .item {
  height: 55px;
}

.device-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

li:hover {
  background-color: #f5f5f5;
}

.well {
  background-color: #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

</style>
